<div class="element-badges page-layout card">
    <h2 class="header">Badge Sizing</h2>
    <div class="content" fxLayout="row wrap" fxLayoutAlign="space-between start" fxLayoutGap="30px">
        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%">
            <h3>Small Badges</h3>
            <div class="mt-24 mb-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <span matBadge="S" matBadgeSize="small" matBadgeColor="primary">Primary</span>
                <span matBadge="S" matBadgeSize="small" matBadgeColor="accent">Accent</span>
                <span matBadge="S" matBadgeSize="small" matBadgeColor="warn">Warn</span>
                <span matBadge="S" matBadgeSize="small">Basic</span>
            </div>
            <mat-divider></mat-divider>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-icon matBadge="S" matBadgeSize="small" matBadgeColor="primary">home</mat-icon>
                <mat-icon matBadge="S" matBadgeSize="small" matBadgeColor="accent">home</mat-icon>
                <mat-icon matBadge="S" matBadgeSize="small" matBadgeColor="warn">home</mat-icon>
                <mat-icon matBadge="S" matBadgeSize="small">home</mat-icon>
            </div>
        </div>
        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%">
            <h3>Medium Badges</h3>
            <div class="mt-24 mb-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <span matBadge="M" matBadgeSize="medium" matBadgeColor="primary">Primary</span>
                <span matBadge="M" matBadgeSize="medium" matBadgeColor="accent">Accent</span>
                <span matBadge="M" matBadgeSize="medium" matBadgeColor="warn">Warn</span>
                <span matBadge="M" matBadgeSize="medium">Basic</span>
            </div>
            <mat-divider></mat-divider>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-icon matBadge="M" matBadgeSize="medium" matBadgeColor="primary">home</mat-icon>
                <mat-icon matBadge="M" matBadgeSize="medium" matBadgeColor="accent">home</mat-icon>
                <mat-icon matBadge="M" matBadgeSize="medium" matBadgeColor="warn">home</mat-icon>
                <mat-icon matBadge="M" matBadgeSize="medium">home</mat-icon>
            </div>
        </div>
        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%">
            <h3>Large Badges</h3>
            <div class="mt-24 mb-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <span matBadge="L" matBadgeSize="large" matBadgeColor="primary">Primary</span>
                <span matBadge="L" matBadgeSize="large" matBadgeColor="accent">Accent</span>
                <span matBadge="L" matBadgeSize="large" matBadgeColor="warn">Warn</span>
                <span matBadge="L" matBadgeSize="large">Basic</span>
            </div>
            <mat-divider></mat-divider>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-icon matBadge="L" matBadgeSize="large" matBadgeColor="primary">home</mat-icon>
                <mat-icon matBadge="L" matBadgeSize="large" matBadgeColor="accent">home</mat-icon>
                <mat-icon matBadge="L" matBadgeSize="large" matBadgeColor="warn">home</mat-icon>
                <mat-icon matBadge="L" matBadgeSize="large">home</mat-icon>
            </div>
        </div>
    </div>
    <h2 class="header">Badge Position</h2>
    <div class="content" fxLayout="row wrap" fxLayoutAlign="space-between start" fxLayoutGap="30px">
        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%">
            <h3>Above / Before</h3>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <span matBadge="ab" matBadgeSize="medium" matBadgeColor="primary" matBadgePosition="above before">Primary</span>
                <span matBadge="ab" matBadgeSize="medium" matBadgeColor="accent" matBadgePosition="above before">Accent</span>
                <span matBadge="ab" matBadgeSize="medium" matBadgeColor="warn" matBadgePosition="above before">Warn</span>
                <span matBadge="ab" matBadgeSize="medium" matBadgePosition="above before">Basic</span>
            </div>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-icon matBadge="ab" matBadgeSize="medium" matBadgeColor="primary" matBadgePosition="above before">home</mat-icon>
                <mat-icon matBadge="ab" matBadgeSize="medium" matBadgeColor="accent" matBadgePosition="above before">home</mat-icon>
                <mat-icon matBadge="ab" matBadgeSize="medium" matBadgeColor="warn" matBadgePosition="above before">home</mat-icon>
                <mat-icon matBadge="ab" matBadgeSize="medium" matBadgePosition="above before">home</mat-icon>
            </div>
        </div>
        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%">
            <h3>Below / After</h3>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <span matBadge="ba" matBadgeSize="medium" matBadgeColor="primary" matBadgePosition="below after">Primary</span>
                <span matBadge="ba" matBadgeSize="medium" matBadgeColor="accent" matBadgePosition="below after">Accent</span>
                <span matBadge="ba" matBadgeSize="medium" matBadgeColor="warn" matBadgePosition="below after">Warn</span>
                <span matBadge="ba" matBadgeSize="medium" matBadgePosition="below after">Basic</span>
            </div>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-icon matBadge="ba" matBadgeSize="medium" matBadgeColor="primary" matBadgePosition="below after">home</mat-icon>
                <mat-icon matBadge="ba" matBadgeSize="medium" matBadgeColor="accent" matBadgePosition="below after">home</mat-icon>
                <mat-icon matBadge="ba" matBadgeSize="medium" matBadgeColor="warn" matBadgePosition="below after">home</mat-icon>
                <mat-icon matBadge="ba" matBadgeSize="medium" matBadgePosition="below after">home</mat-icon>
            </div>
        </div>
        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%">
            <h3>Below / Before</h3>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <span matBadge="bb" matBadgeSize="medium" matBadgeColor="primary" matBadgePosition="below before">Primary</span>
                <span matBadge="bb" matBadgeSize="medium" matBadgeColor="accent" matBadgePosition="below before">Accent</span>
                <span matBadge="bb" matBadgeSize="medium" matBadgeColor="warn" matBadgePosition="below before">Warn</span>
                <span matBadge="bb" matBadgeSize="medium" matBadgePosition="below before">Basic</span>
            </div>
            <div class="mt-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-icon matBadge="bb" matBadgeSize="medium" matBadgeColor="primary" matBadgePosition="below before">home</mat-icon>
                <mat-icon matBadge="bb" matBadgeSize="medium" matBadgeColor="accent" matBadgePosition="below before">home</mat-icon>
                <mat-icon matBadge="bb" matBadgeSize="medium" matBadgeColor="warn" matBadgePosition="below before">home</mat-icon>
                <mat-icon matBadge="bb" matBadgeSize="medium" matBadgePosition="below before">home</mat-icon>
            </div>
        </div>
    </div>
    <div class="content" fxLayout="row nowrap" fxLayoutAlign="space-between start" fxLayoutGap="30px">
        <div class="p-24 pb-0" fxLayout="column nowrap" fxFlex="1 0 0%">
            <h3>Badge Overlap</h3>
            <div class="mt-24" fxLayout="row wrap" fxLayoutGap="70px" fxLayoutGap.lg="100px">
                <span class="mb-24" matBadge="bo" matBadgeSize="medium" matBadgeColor="primary" matBadgeOverlap="false">Primary</span>
                <span class="mb-24" matBadge="bo" matBadgeSize="medium" matBadgeColor="accent" matBadgeOverlap="false">Accent</span>
                <span class="mb-24" matBadge="bo" matBadgeSize="medium" matBadgeColor="warn" matBadgeOverlap="false">Warn</span>
                <span class="mb-24" matBadge="bo" matBadgeSize="medium" matBadgeOverlap="false">Basic</span>
                <mat-icon class="mb-24" matBadge="bo" matBadgeSize="medium" matBadgeColor="primary" matBadgeOverlap="false">home</mat-icon>
                <mat-icon class="mb-24" matBadge="bo" matBadgeSize="medium" matBadgeColor="accent" matBadgeOverlap="false">home</mat-icon>
                <mat-icon class="mb-24" matBadge="bo" matBadgeSize="medium" matBadgeColor="warn" matBadgeOverlap="false">home</mat-icon>
                <mat-icon class="mb-24" matBadge="bo" matBadgeSize="medium" matBadgeOverlap="false">home</mat-icon>
            </div>
        </div>
    </div>
</div>
